<script setup>
	import $http from '@/utils/http'
	import { ref, onMounted, getCurrentInstance } from 'vue'
	import { onShow, onPullDownRefresh  } from '@dcloudio/uni-app'
	import { getClientHeight } from '@/utils/pkg'
	import { useUserStoreHook } from '@/stores/modules/user'
	import { useToast } from 'wot-design-uni'
	
	import setupIcon from '@/static/icon/user/setup_icon.png'
	import liveBroadcastSetupIcon from '@/static/icon/user/live_broadcast_setup.png'
	import uploadVideoIcon from '@/static/icon/user/upload_video.png'
	import enterVideoIcon from '@/static/icon/user/enter_video.png'
	import lockIcon from '@/static/icon/user/lock_icon.png'
	
	const toast = useToast()
	const instance = getCurrentInstance()
	const useUserStore = useUserStoreHook()
	const platform = ref(0)
	const wdTabsNum = ref(1)
	const showAvatar = ref(false)
	const functionIconList = ref([
		{ text: '直播设置',  icon: liveBroadcastSetupIcon },
		{ text: '发布视频',  icon: uploadVideoIcon },
		{ text: '转入视频',  icon: enterVideoIcon },
		{ text: '不公开的',  icon: lockIcon },
	])
	const tabsList = ref([
		{ title: '观看历史' },
		{ title: '我的' },
		{ title: '我未公开的' },
	])
	
	// 跳转用户信息
	const userPage = () => {
		if(useUserStore.isLogin) {
			uni.navigateTo({
				url: `/pages/set-user/set-user`
			});
			return
		}
		uni.navigateTo({
			url: `/pages/login/login`
		});
	}
	
	// 点击的用户图标功能
	const functionOn = (itme, index) => {
		// console.log(itme, index)
		if(!useUserStore.isLogin) {
			uni.navigateTo({
				url: `/pages/login/login`
			});
			return
		}

		if(itme.text === '直播设置') {
			uni.navigateTo({
				url: `/pages/user-create-live-pusher/user-create-live-pusher`
			});
		}
	}
	
	// 关注
	const concernOn = () => {
		console.log('关注')
	}
	
	// 朋友
	const friendOn = () => {
		console.log('朋友')
	}
	
	// 设置
	const setupOn = () => {
		uni.navigateTo({
			url: `/pages/setup-page/setup-page`
		});
	}
	
	// 左右滑动视频list
	const tabsChange = (e) => {
		console.log(e)
	}
	
	// 点击tab的切换
	const tabsClick = () => {
		console.log(wdTabsNum.value)
	}
	
	// 放大头像
	const avatarOn = () => {
		showAvatar.value = true
	}
	
	// 获取用户id
	const getUaerDataId = async () => {
		const res = await $http.request({
			url: `/get-user-id?id=${useUserStore.userinfo.id}`,
			method: 'GET',
			header: {
				token: true
			}
		})
		if(res.code !== 200) {
			toast.show({
				position: 'bottom',
				msg: res.msg
			})
			return
		}
		
		// 重新存在用户数据
		useUserStore.SET_USERINFO({
			...res.data,
			token: useUserStore.userinfo.token,
		})
		useUserStore.SET_AVATAR(res.data.avatar)
	}
	
	// 设置用户盒子背景
	const userBoxBg = () => {
		const avatar = useUserStore.userinfo.avatar || null
		return `background: ${
			avatar ?
			'url('+useUserStore.userinfo.avatar+')':
			'#889AFF'};`
	}
	
	// 下拉触发
	onPullDownRefresh(() => {
		getUaerDataId()
		uni.stopPullDownRefresh()
	})
	
	// 更新数据
	// onShow(() => {
		// getUaerDataId()
	// })
	
	onMounted(async () => {
		platform.value = getClientHeight()
		uni.getStorage({
			key: 'USER_INFO',
			success: (res) => {
				useUserStore.SET_USERINFO(JSON.parse(res.data))
			}
		});
	})
</script>

<template>
	<view
		class="page-user"
		:style="`
			padding-top: ${platform}rpx; ${userBoxBg()};`">
		<view class="user-box-itme">
			<view class="avatar-box">
				<image
					class="avatar-img"
					@click.stop="avatarOn"
					:src="useUserStore.userinfo.avatar ? useUserStore.userinfo.avatar : useUserStore.noIsAvatar"></image>
			</view>
			<view class="user-text">
				<text class="nickname" @click.stop="userPage">{{ useUserStore.userinfo.nickname }}</text>
				<text class="account" @click.stop="userPage">账号: {{ useUserStore.userinfo.account }}</text>
				<text class="set-user" @click.stop="userPage">点击修改资料</text>
			</view>
		</view>
		<view class="user-box-itme">
			<wd-grid bg-color="#282c3500">
				<wd-grid-item
					icon-size="70rpx"
					v-for="(itme, index) in functionIconList"
					:key="index"
					:icon="itme.icon"
					:text="itme.text"
					@click="functionOn(itme, index)"
					custom-class="custom-item" />
			</wd-grid>
		</view>
	</view>
	<view class="video-box">
		<view class="user-information">
			<text class="information-itme-text" @click="concernOn">关注: {{useUserStore.concern}}</text>
			<text class="information-itme-text" @click="friendOn">朋友: {{useUserStore.friend}}</text>
			<image class="information-itme-icon" @click="setupOn" :src="setupIcon"></image>
		</view>
		<view class="video-list">
			<wd-tabs
				swipeable
				:lineWidth="0"
				color="#ffffff"
				v-model="wdTabsNum"
				custom-class="wd-tabs"
				inactiveColor="#dddddd"
				@change="tabsChange"
				@click="tabsClick">
			  <block v-for="(item, index) in tabsList" :key="index">
			    <wd-tab custom-class="wd-tab" :title="item.title">
			      <view class="tab-content">
							
							{{ item.title }}
							
						</view>
			    </wd-tab>
			  </block>
			</wd-tabs>
		</view>
	</view>
	<wd-overlay :show="showAvatar" @click="showAvatar = false">
	  <view class="show-avatar-box">
			<image
				class="show-avatar"
				mode="aspectFit"
				:src="useUserStore.userinfo.avatar ? useUserStore.userinfo.avatar : useUserStore.noIsAvatar"></image>
	  </view>
	</wd-overlay>
	<wd-toast />
</template>

<style scoped lang="scss">
@import "@/common/common.scss";

.page-user {
	width: 100%;
	background-size: 100% 100%;
	
	display: flex;
	align-items: center;
	flex-direction: column;
		
	.user-box-itme {
		width: 95%;
		padding: 10rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: rgba(40, 44, 54, 0.98);
		
		display: flex;
		flex-direction: column;
		
		.avatar-box {
			width: 100%;
			height: 180rpx;
			
			display: flex;
			align-items: flex-end;
			justify-content: center;
			
			.avatar-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 2px solid #fff;
			}
		}
		.user-text {
			width: 100%;
			height: 140rpx;
			
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			
			.nickname {
				color: #eeeeee;
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 2rpx;
			}
			.account {
				color: #A2A3A7;
				font-size: 22rpx;
				font-weight: 600;
			}
			.set-user {
				color: #FFA500;
				opacity: 0.8;
				font-size: 17rpx;
				font-weight: 600;
			}
		}
		:deep(.custom-item) {
			display: flex;
			align-items: center;
			justify-content: center;
			
			color: #ffffff;
			.slot-img {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
}

.video-box {
	width: 100%;
	.user-information {
		width: 100%;
		height: 70rpx;
		padding: 0 50rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #5A5C61;
		
		display: flex;
		align-items: center;
		
		.information-itme-text {
			color: #eeeeee;
			font-size: 28rpx;
			margin-right: 40rpx;
		}
		.information-itme-icon {
			width: 50rpx;
			height: 50rpx;
			margin-left: auto;
		}
	}
	
	.video-list {
		width: 100%;
		:deep(.wd-tabs__nav) {
			border-bottom: 2rpx solid #5A5C61;
			background-color: #282c35 !important;
		}
		:deep(.wd-tab) {
			background-color: #282c35 !important;
			
			.tab-content {
				padding: 100rpx;
			}
		}
	}
}

.show-avatar-box {
	width: 100%;
	height: 100%;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	.show-avatar {
		height: 650rpx;
	}
}
</style>
